<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:fragment="html(title, content)">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} + ' | 后台管理 - 扶贫助农电商平台'">后台管理</title>
    
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">
    
    <style>
        body {
            display: flex;
            min-height: 100vh;
            background-color: #f8f9fa;
        }
        .sidebar {
            width: 250px;
            flex-shrink: 0;
            background-color: #343a40;
            color: white;
            padding-top: 20px;
        }
        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.7);
            padding: 10px 20px;
            display: flex;
            align-items: center;
        }
        .sidebar .nav-link .fas {
            width: 20px;
            margin-right: 10px;
        }
        .sidebar .nav-link.active {
            color: white;
            background-color: #0d6efd;
        }
        .sidebar .nav-link:hover {
            color: white;
            background-color: #495057;
        }
        .content {
            flex-grow: 1;
            padding: 30px;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <h4 class="text-center mb-4">后台管理</h4>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" th:classappend="${activePage == 'dashboard' ? 'active' : ''}" href="/admin/dashboard">
                    <i class="fas fa-tachometer-alt"></i> 仪表盘
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:classappend="${activePage == 'product' ? 'active' : ''}" href="/admin/product">
                    <i class="fas fa-box"></i> 产品管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:classappend="${activePage == 'news' ? 'active' : ''}" href="/admin/news">
                    <i class="fas fa-newspaper"></i> 新闻管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:classappend="${activePage == 'announcement' ? 'active' : ''}" href="/admin/announcement">
                    <i class="fas fa-bullhorn"></i> 公告管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:classappend="${activePage == 'gallery' ? 'active' : ''}" href="/admin/gallery">
                    <i class="fas fa-images"></i> 图库管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:classappend="${activePage == 'company' ? 'active' : ''}" href="/admin/company">
                    <i class="fas fa-building"></i> 企业信息
                </a>
            </li>
            <li class="nav-item mt-auto pt-4">
                <a class="nav-link" href="/" target="_blank">
                    <i class="fas fa-home"></i> 返回前台
                </a>
            </li>
        </ul>
    </div>

    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <!-- Flash Messages -->
        <div th:if="${message}" class="alert alert-success alert-dismissible fade show mt-3" role="alert">
            <i class="fas fa-check-circle"></i> [[${message}]]
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show mt-3" role="alert">
            <i class="fas fa-times-circle"></i> [[${error}]]
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <div class="container-fluid">
            <h2 th:text="${title}">Page Title</h2>
            <hr>
            <div th:replace="${content}">
                <!-- 具体页面内容将在这里被替换 -->
            </div>
        </div>
    </main>

    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
</body>
</html> 